<template>
  <nav style="position: absolute">
    <div :style="div1">
      <p :style="p" @mousedown.prevent="handleMouseDown">{{ currentTime }}</p>
    </div>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      currentTime: '',
      class1:{
        display:"flex",
        width:"100vw",
        marginTop:"10vh",
        justifyContent:"center",
      },
      class2:{
        fontSize:"50px",
      }
    };
  },
  computed:{
    div1(){
      return{
        display:this.class1.display,
        width:this.class1.width,
        marginTop:this.class1.marginTop,
        justifyContent:this.class1.justifyContent,
      }
    },
    p(){
      return{
        fontSize:this.class2.fontSize,
      }
    }
  },
  methods: {
    getCurrentTime() {
      const now = new Date();
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      this.currentTime = `${hours}:${minutes}`;
    },
    handleMouseDown(event) { // 阻止鼠标左键行为
      if (event.button === 0) { // 0 表示左键
        event.preventDefault();
        // console.log('鼠标左键被阻止');
      }
    },

  },
  mounted() {
    this.getCurrentTime();
    // 如果需要实时更新时间，可以使用 setInterval
    setInterval(this.getCurrentTime, 60000); // 每分钟更新一次
  },
};
</script>

<style scoped>
</style>
